<template>
    <div class="banner">
        <b-container>
            <b-row>
                <b-col xl="4" lg="4" md="4" sm="12" class="inner inner-left">
                    <div class="left fadeIn">
                        <h1>{{$t('news.banner.title')}}</h1>
                        <h3>{{$t('news.banner.subtitle')}}</h3>
                        <img src="../images/news-banner-arrow.png" class="fadeInUp">
                    </div>
                </b-col>
                <b-col xl="8" lg="8" md="8" sm="12" class="inner inner-right">
                    <div class="right">
                        <img class="fadeInUp" src="../images/news-banner-img.png">  
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<style lang="scss" scoped>
.banner{
    height: 300px;
    background: url(../images/news-banner.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    .inner{
        height: 300px;
    }
    .left{
        position: absolute;
        top:50%;
        left:100px;
        transform: translateY(-30%);
        text-align: center;
        h1{
            font-size:40px;
            color:#fff;
        }
        h3{
            font-size:20px;
            color:#fff;
            margin-top:15px;
            margin-bottom:30px;
        }
    }
    .right{
        position: absolute;
        bottom: -55px;
        right: 0;
        img{
            width:auto;
            height:300px;
            max-width: 100%;
        }
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1000ms .8s ease both;
}
.fadeInUp {
    -webkit-animation: fadeInUp 1000ms .8s ease both;
}

@keyframes fadeInUp{
	0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0,100%,0);
	    transform: translate3d(0,100%,0);
	}
	100% {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	}
}

@keyframes fadeIn{
	0% {
	    opacity: 0;
	}
	100% {
	    opacity: 1;
	}
}
</style>
